@using System.Web.Optimization
@inherits VocaDb.Web.Code.VocaDbPage

@{
	PageProperties.Title = "Manage NicoNicoDouga tag mappings";
	ViewBag.Parents = new[] {
		Html.ActionLink("Manage", "Index"),
	};
	var siteName = BrandableStrings.Layout.SiteName;
}

<div class="alert alert-info">
	These mappings will be used to automatically add tags from external video streaming service. Currently only NicoNicoDouga is supported.
	Tags will be mapped from the source system (NND) to target tag on @siteName.
	Multiple tags from the source system may be mapped to a single tag on @siteName, but one source tag can be mapped to only one target tag (additional mappings are ignored).
</div>

<form class="form-horizontal">
	<h3>New mapping</h3>
	<div class="control-group">
		<label class="control-label" for="newSourceName">Source tag name</label>
		<div class="controls">
			<input type="text" id="newSourceName" maxlength="200" textInput="{{newSourceName}}" placeholder="Tag name" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">Target tag</label>
		<div class="controls">
			@KnockoutHelpers.BasicEntryLinkLockingAutoComplete("tagAutoComplete", "newTargetTag")
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<button type="button" class="btn btn-primary" data-bind="click: addMapping">Add</button>
		</div>
	</div>
</form>

<hr />

<form data-bind="submit: save, show" class="js-cloak">
	
	<h3>Mappings</h3>
	
	<div class="input-append input-prepend">
		<span class="add-on"><i class="icon-search"></i></span>
		<input type="text" data-bind="textInput: filter" placeholder="Search"/>
		<button class="btn btn-danger" type="button" data-bind="click: function() { filter(''); }, enable: filter()">Clear</button>
	</div>	

	<br />
	<br />

	@Helpers.SaveBtn()

	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

	<table>
		<thead>
			<tr>
				<th>Source (NND)</th>
				<th>Target (@siteName)</th>
				<th></th>
			</tr>
		</thead>
		<tbody data-bind="foreach: sortedMappingsPage">
			<tr data-bind="css: { 'row-new': $data.isNew, 'row-deleted': $data.isDeleted }">
				<td>
					<a class="extLink" href="{{$parent.getSourceTagUrl($data)}}" target="_blank">{{sourceTag}}</a>
				</td>
				<td>
					<a class="extLink" href="{{$parent.getTagUrl($data)}}" target="_blank">{{tag.name}}</a>
				</td>
				<td>
					<button class="btn btn-small btn-danger" data-bind="click: deleteMapping, disable: isDeleted">Delete</button>
				</td>
			</tr>
		</tbody>
	</table>
	<br />
	
	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

	@Helpers.SaveBtn()

</form>

@section BodyScripts {
	@Scripts.Render("~/bundles/shared/edit")
	<script type="text/javascript" src="@Url.Content("~/Scripts/KnockoutExtensions/TagAutoComplete.js")"></script>
	<script type="text/javascript" src="@Url.Content("~/Scripts/ViewModels/Admin/ManageTagMappingsViewModel.js")"></script>
	<script type="text/javascript" src="@Url.Content("~/Scripts/Repositories/TagRepository.js")"></script>
	<script type="text/javascript">
		$(function () {

			ko.punches.enableAll();

			var urlMapper = new vdb.UrlMapper('@RootPath');
			var tagRepo = new vdb.repositories.TagRepository('@RootPath');

			var viewModel = new vdb.viewModels.admin.ManageTagMappingsViewModel(tagRepo);
			ko.applyBindings(viewModel);

		});
	</script>
}